<template>
  <div class="app-container">
    <el-container style="height: 700px; border: 1px solid #eee;margin-right: 10px;">
      <!--侧边栏目录部分-->
      <el-aside width="200px" id="aside" style=" position: relative;" v-show="!collapsed">
        <el-header style=" height:30px;">
          <span style="margin-left:5px; font-size: 10px;">项目列表</span>
          <i class="el-icon-circle-plus deepblue" plain id="addMenu" @click="handleAddMenu"
            style="margin: 10px 0px 0px 0px ;font-size: 20px;float:right;width:20px;"></i>
        </el-header>
        <el-input v-model="filterText" placeholder="请输入" size="mini" @input="filterChange">
          <i slot="suffix" class="el-input__icon el-icon-search"></i></el-input>
        <el-tree :collapse="collapsed" :default-expand-all=false :data="groups" node-key="id"
          :props="{ label: 'name', id: 'id' }" highlight-current :render-content="renderContent"
          @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree"></el-tree>
        <!--侧边栏关闭按钮-->
        <div class="aside_close" @click="changeCollapse">
          <i v-if="!collapsed"><img src="@/assets/icons/redis/u795_1.png"></i>
        </div>
      </el-aside>
      <!--主体表格部分-->
      <el-container id="container">
        <!--侧边栏展开按钮-->
        <div class="aside_open" @click="changeCollapse">
          <i v-if="collapsed"><img src="@/assets/icons/redis/u795_2.png"></i>
        </div>
        <el-header style="height:50px;margin-left:20px;box-shadow: 2px 2px 2px gainsboro;">
          <el-button class="deepbluefull" icon="el-icon-circle-plus-outline" style="margin-top:10px" size="mini"
            @click="handleAdd" v-hasPermi="['system:certificate:add']">新增</el-button>
          <el-button class="deepblue" plain icon="el-icon-delete" style="margin-top:10px" size="mini"
            @click="handleDelete" v-hasPermi="['system:certificate:remove']">删除</el-button>
          <el-input v-model="queryParams.certificateCheckStatus" placeholder="请输入单位名称或者证书状态" size="mini" clearable
            style="width: 30%; float: right; margin-top: 10px; margin-right: 0px;" @keyup.enter.native="handleQuery">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="handleQuery"></i>
          </el-input>
        </el-header>
        <el-main>
          <el-table v-loading="loading" :data="certificateList" @selection-change="handleSelectionChange" size="mini"
            :header-cell-style="{ background: 'rgba(244, 244, 244, 1)', border: 'rgba(227, 227, 227, 1)' }"
            :default-sort="{ prop: 'certificateId', order: 'ascending' }">
            <el-table-column type="selection" min-width="3.9%" align="center" />
            <el-table-column label="序号" min-width="5.1%" align="center" prop="certificateId" />
            <el-table-column label="单位" min-width="8.9%" align="center" sortable prop="companyName" />
            <el-table-column label="证书类型" min-width="9.2%" align="center" prop="certificateType" />
            <el-table-column label="截止时间" min-width="11.2%" align="center" sortable prop="certificateDeadline">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.certificateDeadline, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="生成时间" min-width="16.8%" align="center" sortable prop="certificateCreateTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.certificateCreateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="校验类型" align="center" min-width="8%" prop="certificateCheckType" />
            <el-table-column label="host/mac地址" min-width="13.4%" align="center" prop="certificateCheckAddress" />
            <el-table-column label="证书状态" align="center" min-width="11.2%" prop="certificateCheckStatus">
              <template slot-scope="scope">
                <el-tag :type="scope.row.certificateCheckStatus == '有效' ? 'success' : 'danger'">{{
                  scope.row.certificateCheckStatus }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="13.4%" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                    <el-link :underline="false" type="primary" @click="handleDownload(scope.row)"
                      v-hasPermi="['system:certificate:export']" style="color:#0052D9;">下载</el-link>
                  </el-col>
                  <el-col :span="1.5">
                    <el-link :underline="false" type="primary" @click="handleUpdate(scope.row)"
                      v-hasPermi="['system:certificate:edit']" style="color:#0052D9;">修改</el-link>
                  </el-col>
                  <el-col :span="1.5">
                    <el-link :underline="false" type="primary" @click="handleDelete(scope.row)"
                      v-hasPermi="['system:certificate:remove']" style="color:#0052D9;">删除</el-link>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next"
            :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-main>
      </el-container>
    </el-container>

    <!-- 添加或修改证书管理对话框 -->
    <el-dialog id="dialogCertificate" :title="title" :visible.sync="open" width="360px" append-to-body>
      <hr style="color: rgb(240, 240, 240); " />
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
        <el-form-item label="单位" prop="companyName">
          <el-select v-model="form.companyName">
            <el-option v-for=" item  in  companys " :key="item.value" :label="item.value" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书版本" prop="certificateType">
          <el-radio-group v-model="form.certificateType" size="small">
            <el-radio-button label="试用版">试用版</el-radio-button>
            <el-radio-button label="正式版">正式版</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="截止时间" prop="certificateDeadline">
          <el-date-picker clearable v-model="form.certificateDeadline" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择截止时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="校验类型" prop="certificateCheckType">
          <el-radio-group v-model="form.certificateCheckType" size="small" @change="CheckTypeChangeHandler">
            <el-radio-button label="host认证">host认证</el-radio-button>
            <el-radio-button label="mac认证">mac认证</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="getType(form.certificateCheckType) + '地址'" prop="certificateCheckAddress">
          <el-input v-model="form.certificateCheckAddress" />
        </el-form-item>
        <el-form-item label="备注" prop="comment">
          <el-input type="textarea" maxlength="200" show-word-limit v-model="form.comment"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="width:90px" @click="cancel">取消</el-button>
        <el-button class="deepbluefull" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改证书目录对话框 -->
    <el-dialog id="dialogMenu" :title="title" :visible.sync="open_menu" width="360px" append-to-body>
      <hr style="color: rgb(240, 240, 240); " />
      <el-form ref="form_menu" :model="form_menu" :rules="rules_menu" label-width="100px" size="mini">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="form_menu.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目编码" prop="code">
          <el-input v-model="form_menu.code" placeholder="请输入项目代码" />
        </el-form-item>
        <el-form-item label="项目类型" prop="type">
          <el-radio-group v-model="form_menu.type" size="small">
            <el-radio-button label="统推">统推</el-radio-button>
            <el-radio-button label="自建">自建</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目负责人" prop="principal">
          <el-input v-model="form_menu.principal" placeholder="请输入项目负责人" />
        </el-form-item>
        <el-form-item label="备注" prop="comment">
          <el-input type="textarea" maxlength="200" show-word-limit v-model="form_menu.comment" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="width:90px" @click="cancel">取消</el-button>
        <el-button class="deepbluefull" @click="submitFormMenu">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCertificate, getCertificate, delCertificate, addCertificate, updateCertificate, downloadCertificate } from "@/api/system/certificate";
import { listCertificate_menu, getCertificate_menu, delCertificate_menu, addCertificate_menu, updateCertificate_menu } from "@/api/system/certificate_menu";
import icon_img from '@/assets/icons/certificate/u7.png'
export default {
  name: "Certificate",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 证书管理表格数据
      certificateList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open_menu: false,
      //侧边栏
      collapsed: false,
      img_url: icon_img,
      //树的过滤
      filterText: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: null,
        certificateType: null,
        certificateDeadline: null,
        certificateCheckType: null,
        certificateCheckAddress: null,
        certificateCheckStatus: null,
        certificateCreateTime: null,
        createTime: null,
        comment: null,
        projectId: null
      },
      // 目录查询参数
      queryParams_menu: {
        pageNum: 1,
        pageSize: 10000,
        name: null,
        code: null,
        type: null,
        principal: null,
        comment: null
      },
      // 表单参数
      form: {},
      form_menu: {},
      //树形参数
      //单位单选框
      companys: [
        {
          value: '北京'
        },
        {
          value: '天津'
        },
        {
          value: '福建'
        },
        {
          value: '浙江'
        }
      ],
      //树形数据（写死版 格式参考
      groups: [],
      // 表单校验
      rules: {
        companyName: [
          { required: true, message: "单位名称不能为空", trigger: "blur" }
        ],
        certificateType: [
          { required: true, message: "证书类型不能为空", trigger: "change" }
        ],
        certificateDeadline: [
          { required: true, message: "截止时间不能为空", trigger: "blur" }
        ],
        certificateCheckType: [
          { required: true, message: "证书校验类型不能为空", trigger: "change" }
        ],
        certificateCheckAddress: [
          { required: true, message: "host地址不能为空", trigger: "blur" },
          {
            pattern: "^(((\\d)|([1-9]\\d)|(1\\d{2})|(2[0-4]\\d)|(25[0-5]))\\.){3}((\\d)|([1-9]\\d)|(1\\d{2})|(2[0-4]\\d)|(25[0-5]))$"
            , message: "请输入正确的地址格式,从0.0.0.0到255.255.255.255", trigger: "blur"
          }
        ],
      },
      rules_menu: {
        name: [
          { required: true, message: "项目名称不能为空", trigger: "blur" },
          { pattern: "^[\u4e00-\u9fa5]{2,10}$", message: "由2-10位的汉字组成", trigger: "blur" }
        ],
        code: [
          { required: true, message: "项目编码不能为空", trigger: "blur" },
          {
            min: 6, max: 16, message: '项目编码应为6-16位的长度', trigger: 'blur'
          }
        ],
        type: [
          { required: true, message: "项目类型不能为空", trigger: "change" }
        ],
        principal: [
          { required: true, message: "项目负责人不能为空", trigger: "blur" },
          { pattern: "^[\u4e00-\u9fa5]{2,6}$", message: "由2-6位的汉字组成", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    if (window.sessionStorage.getItem('projectId')) {
      this.queryParams.projectId = window.sessionStorage.getItem('projectId')
    }
    this.getMenu();
    setTimeout(() => {
      this.getList();
    }, 500);
  },
  methods: {
    /** 查询证书管理列表 */
    getList() {
      this.loading = true;
      listCertificate(this.queryParams).then(response => {
        this.certificateList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getMenu() {
      this.loading = true;
      listCertificate_menu(this.queryParams_menu).then(response => {
        this.groups = response.rows;
        this.$nextTick(() => {
          if (window.sessionStorage.getItem('projectId')) {
            this.$refs.tree.setCurrentKey(window.sessionStorage.getItem('projectId'))
          }
          else {
            this.$refs.tree.setCurrentKey(this.groups[0].id)
            this.queryParams.projectId = this.groups[0].id
          }
        })
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    filterChange: function() {
      this.$refs.tree.filter(this.filterText);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.open_menu = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        certificateId: null,
        companyName: '北京',
        certificateType: '试用版',
        certificateDeadline: null,
        certificateCheckType: 'host认证',
        certificateCheckAddress: null,
        certificateCreateTime: null,
        certificateCheckStatus: null,
        createTime: null,
        comment: null,
        projectId: null,
      };
      this.rules.certificateCheckAddress = [{ required: true, message: "host地址不能为空", trigger: "blur" },
      {
        pattern: "^(((\\d)|([1-9]\\d)|(1\\d{2})|(2[0-4]\\d)|(25[0-5]))\\.){3}((\\d)|([1-9]\\d)|(1\\d{2})|(2[0-4]\\d)|(25[0-5]))$"
        , message: "请输入正确的地址格式,从0.0.0.0到255.255.255.255", trigger: "blur"
      }]
      this.resetForm("form");
    },
    resetMenu() {
      this.form_menu = {
        id: null,
        name: null,
        code: null,
        type: '统推',
        principal: null,
        comment: null
      };
      this.resetForm("form_menu");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      //可能多次查询单位要清空
      this.queryParams.companyName = null
      this.queryParams.pageNum = 1;
      if (this.queryParams.certificateCheckStatus == "有效" || this.queryParams.certificateCheckStatus == "失效" || this.queryParams.certificateCheckStatus == null) {
      }
      else {
        this.queryParams.companyName = this.queryParams.certificateCheckStatus;
        this.queryParams.certificateCheckStatus = null;
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.certificateId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增证书";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const certificateId = row.certificateId || this.ids
      getCertificate(certificateId).then(response => {
        this.form = response.data;
        if (this.form.certificateCheckType == 'mac认证')
        {
          this.rules.certificateCheckAddress = [{ required: true, message: "mac地址不能为空", trigger: "blur" },
        {
          pattern: "([A-Fa-f0-9]{2}-){5}[A-Fa-f0-9]{2}"
          , message: "请输入正确的地址格式,XX-XX-XX-XX-XX-XX", trigger: "blur"
        }]
        }
        this.open = true;
        this.title = "修改证书管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.certificateId != null) {
            updateCertificate(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.reset();
              this.open = false;
              this.getList();
            });
          } else {
            if (window.sessionStorage.getItem('projectId')) {
              this.form.projectId = window.sessionStorage.getItem('projectId')
            }
            else {
              this.form.projectId = this.groups[0].id
            }
            var d = new Date();
            //转成YY-MM-DD HH:MM:ss
            var time = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
            this.form.certificateCreateTime = time
            addCertificate(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.reset();
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const certificateIds = row.certificateId || this.ids;
      if (certificateIds.length == 0) {
        this.$message.warning('请选中表格中要删除的对应项，再点击此按钮')
      }
      else {
        this.$confirm(`<hr/><span style="align:center;font-size:10px;"><i class="el-icon-warning-outline" style="color:#ffa000;font-size:26px;margin: 20px 10px 0px 50px"></i>删除后无法恢复，是否确认删除</span>`, "删除提示", {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          cancelButtonClass: 'btn_blue',
          confirmButtonClass: 'btn_bluefull',
        }).then(function() {
          return delCertificate(certificateIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
      }
    },
    /** 导出按钮操作 */
    handleDownload(row) {
      const certificateId = row.certificateId || this.ids
      this.queryParams.certificateId = certificateId
      downloadCertificate(this.queryParams).then(response => {
        this.download('system/certificate_menu/export', {
          response
        }, `certificate_${new Date().getTime()}.lic`)
        this.getList();
      })
    },
    /**Menu部分 */
    handleAddMenu() {
      this.resetMenu();
      this.open_menu = true;
      this.title = "添加项目";
    },
    /** 搜索按钮操作 */
    handleQueryMenu() {
      this.queryParams_menu.pageNum = 1;
      this.getMenu();
    },
    /** 重置按钮操作 */
    resetQueryMenu() {
      this.resetForm("queryForm_menu");
      this.handleQueryMenu();
    },
    /** 修改按钮操作 */
    handleUpdateMenu(id) {
      getCertificate_menu(id).then(response => {
        this.form_menu = response.data;
        this.open_menu = true;
        this.title = "修改项目";
      });
    },
    /** 提交按钮 */
    submitFormMenu() {
      this.$refs["form_menu"].validate(valid => {
        if (valid) {
          if (this.form_menu.id != null) {
            updateCertificate_menu(this.form_menu).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open_menu = false;
              this.getMenu();
              this.getList();
            });
          } else {
            addCertificate_menu(this.form_menu).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open_menu = false;
              this.getMenu();
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDeleteMenu(id, label) {
      this.$confirm(`<hr/><span style="align:center;font-size:10px;"><i class="el-icon-warning-outline" style="color:#ffa000;font-size:26px;margin: 20px 10px 0px 50px"></i>删除后无法恢复，是否确认删除</span>`, "删除提示", {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        cancelButtonClass: 'btn_blue',
        confirmButtonClass: 'btn_bluefull',
      }).then(function() {
        return delCertificate_menu(id);
      }).then(() => {
        //删除左边目录，目录对应的内容也一并删除
        this.queryParams.projectId = id;
        listCertificate(this.queryParams).then(response => {
          for (var i = 0; i < response.rows.length; i++) {
            delCertificate(response.rows[i].certificateId)
          }
        });
        this.getMenu();
        setTimeout(() => {
          this.getList();
        }, 500);
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 弹出框类型更新 */
    getType(type) {
      if (type != null) {
        return type.replace("认证", "")
      }
      else {
        return 'host'
      }
    },
    /** 侧边栏是否展开控制*/
    changeCollapse() {
      this.collapsed = !this.collapsed
    },
    /** 侧边栏目录渲染*/
    renderContent: function(h, { node, data, store }) {
      return (<span style="width:180px;"><span style="display:block; float:left;"><img src={this.img_url} style="height:20px;width:20px;" /></span> <el-tooltip effect="light" placement="bottom-start"
      ><div slot="content"><li>项目名称:{data.name}</li><li>项目编码:{data.code}</li><li>项目类型:{data.type}</li><li>项目负责人:{data.principal}</li><li>备注:{data.comment}</li></div><span style="width:120px; display:block; float:left;margin-top:5px;padding:5px 0px 5px 4px;font-size:8px;line-height:18px">{node.label}</span></el-tooltip><i class="el-icon-remove-outline" style="float:right;margin-right:0px;margin-top:8px;" on-click={() => this.handleDeleteMenu(data.id, data.name)}></i><i class="el-icon-edit" style="float:right;margin-right:2px;margin-top:8px;" on-click={() => this.handleUpdateMenu(data.id)}></i></span >);
    },
    /**点击侧边栏目录*/
    handleNodeClick(data) {
      window.sessionStorage.setItem('projectId', data.id)
      //每点击一个新的项目清空搜索条件
      this.queryParams.companyName = "";
      this.queryParams.certificateCheckStatus = ""
      this.queryParams.projectId = data.id;
      this.getList();
    },
    /**点击按钮不同校验规则的改变 */
    CheckTypeChangeHandler(value) {
      if (value == 'host认证') {
        this.rules.certificateCheckAddress = [{ required: true, message: "host地址不能为空", trigger: "blur" },
        {
          pattern: "^(((\\d)|([1-9]\\d)|(1\\d{2})|(2[0-4]\\d)|(25[0-5]))\\.){3}((\\d)|([1-9]\\d)|(1\\d{2})|(2[0-4]\\d)|(25[0-5]))$"
          , message: "请输入正确的地址格式,从0.0.0.0到255.255.255.255", trigger: "blur"
        }]
      }
      else {
        this.rules.certificateCheckAddress = [{ required: true, message: "mac地址不能为空", trigger: "blur" },
        {
          pattern: "([A-Fa-f0-9]{2}-){5}[A-Fa-f0-9]{2}"
          , message: "请输入正确的地址格式,XX-XX-XX-XX-XX-XX", trigger: "blur"
        }]
      }
    },
  }
};
</script>
<style scoped>
.el-aside {
  background-color: #fff;
  box-shadow: 2px 2px 2px gainsboro;
}

::v-deep .el-tooltip__popper {
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  box-shadow: 2px 2px 2px gainsboro;
}

aside {
  padding: 8px 8px;
}

.el-header {
  padding: 0px;
  margin-left: 0px;
}

.deepblue {
  margin-left: 1%;
  color: #0052D9;
  background-color: white;
  border-color: #0052D9;
  width: 90px;
}

.deepbluefull {
  margin-left: 1%;
  background-color: #0052D9;
  color: white;
  border-color: #0052D9;
  width: 90px;
}

::v-deep .el-dialog__header {
  padding: 10px 0 0 10px;
}

::v-deep .el-dialog__title {
  line-height: 30px;
  font-size: 8px;
  color: #303133;
}

::v-deep .el-dialog__body {
  padding: 0 20px;
}


::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  color: #0052D9;
  background-color: #FFFFFF;
  border-color: #0052D9;
  -webkit-box-shadow: -1px 0 0 0 #0052D9;
  box-shadow: -1px 0 0 0 #0052D9;
}

::v-deep .el-tree-node__expand-icon {
  display: none;
}

::v-deep .el-tree-node__content {
  margin-top: 5px;
}

::v-deep .el-table .cell,
.el-table th div {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
}

::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #FFFFFF
}

::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content>span>.el-tooltip {
  background-color: #e7effb
}

.aside_close {
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 60px;
  line-height: 60px;
  color: #fff;
  background-color: #fff;
  border-radius: 0 6px 6px 0;
  font-size: 20px;
  z-index: 1000;
  cursor: pointer;
}

.aside_open {
  position: absolute;
  left: 0;
  top: 45%;
  width: 16px;
  height: 60px;
  line-height: 60px;
  color: #fff;
  background-color: #fff;
  border-radius: 0 6px 6px 0;
  font-size: 20px;
  z-index: 1000;
  cursor: pointer;
}

.aside_open:hover {
  transform: scale(1.05);
}

.aside_close:hover {
  transform: scale(1.05);
}
</style>

<style>
.el-table__cell {
  padding: 0 !important;
}

.el-tag--success {
  background-color: #d6ffce !important;
  border-color: #74c662 !important;
  color: #74c662 !important;
}

.el-tag--danger {
  background-color: #ffd6d6 !important;
  border-color: #ff4949 !important;
}

.el-message-box {
  width: 407px;
  height: 208px;
}

.el-message-box__header {
  padding: 25px 0px 0px 20px;
}

.el-message-box__content {
  height: 100px;
}

.el-message-box__title {
  font-size: 10px;
}

.el-pager li.active {
  background-color: #0052D9 !important;
}

.el-tooltip__popper.is-light {
  border: 0;
  box-shadow: 2px 2px 2px 2px gainsboro;
}

.btn_blue {
  margin-left: 1%;
  width: 104px;
  height: 36px;
}

.btn_bluefull {
  margin-left: 1%;
  background-color: #0052D9 !important;
  color: white;
  border-color: #0052D9;
  width: 104px;
  height: 36px;
}
</style>
